<template>
  <div class="container">
    <el-dialog title="题目预览" :visible="showDia" width="60%" @close="close">
      <el-row>
        <el-col :span="6">【题型】：{{ getQuestionType(renderDia) }}</el-col>
        <el-col :span="6">【编号】：{{ renderDia.id }}</el-col>
        <el-col :span="6">【难度】：{{ getDifficultyType(renderDia) }}</el-col>
        <el-col :span="6">【标签】：{{ renderDia.tags }}</el-col>
        <el-col :span="6">【学科】：{{ renderDia.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ renderDia.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ renderDia.direction }}</el-col>
      </el-row>
      <hr />
      【题干】：
      <p v-html="renderDia.question" :style="{ color: 'blue' }"></p>
      <div v-if="renderDia.questionType !== 3">
        <div>
          {{ renderDia.questionType + ' 选项：（以下选中的选项为正确答案）' }}
        </div>
        <div v-if="+renderDia.questionType === 2">
          <el-col :span="24" v-for="item in renderDia.options" :key="item.id">
              <el-checkbox
                :label="item.code + ': ' + item.title"
                :checked="!!item.isRight"
                disabled
                v-model="item.isRight"
              ></el-checkbox>
            </el-col>
        </div>
        <div v-else>
          <el-radio-group v-model="options[0]" size="mini" disabled>
            <div   v-for="item in renderDia.options"   :key="item.id">
            <el-radio
              :label="item.id"
              :checked="!!item.isRight"
              disabled
              >{{ item.code + ': ' + item.title }}</el-radio
            >
          </div>
          </el-radio-group>
        </div>
      </div>
      <hr />
      【参考答案】：<el-button
        type="danger"
        size="small"
        @click="showVideo = true"
        >视频答案预览</el-button
      >
      <div class="video" v-if="showVideo">
        <video src="http://v.itheima.com/zycbrm2.mp4" controls="controls"></video>
      </div>
      <hr />
      【答案解析】：
      <div v-html="renderDia.answer"></div>
      <hr />
      【题目备注】：
      <div v-html="renderDia.remarks"></div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants.js'
export default {
  props: { renderDia: Object, options: Array, data: Object },
  data () {
    return {
      showDia: false,
      showVideo: false,
      videoURL: ''
    }
  },
  methods: {
    close () {
      this.showVideo = false
      this.showDia = false
    },
    open () {
      this.showDia = true
    },
    // 难度
    getDifficultyType (row) {
      let text
      difficulty.forEach(item => {
        if (item.value === +row.difficulty) {
          text = item.label
        }
      })
      return text
    },
    // 题型
    getQuestionType (row) {
      let text
      questionType.forEach(item => {
        if (item.value === +row.questionType) {
          text = item.label
        }
      })
      return text
    }
  },
  created () {
    console.log('ppppppppppppppppppp')
    // 在组件挂载后，获取后台给出的视频地址，并赋值给videoURL属性
    console.log(this.renderDia, 'dfghj')
    this.videoURL = this.renderDia.videoURL
  }
}
</script>

<style scoped lang="less">
.el-col {
  margin: 10px 0;
}
.video {
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
